<template>
  <view class="full-screen">
    <u-navbar
      bgColor="transparent"
      @leftClick="leftClick"
      title="上传视频"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="40"
    ></u-navbar>
    <!-- 视频预览 -->
    <video :src="videoPath" controls fullscreen object-fit="fill" class="video-preview"></video>
    <!-- 底部完成按钮 -->
    <view class="complete-btn" @click="handleComplete">完成</view>
  </view>
</template>

<script>
import { fileUpload, fileUploadPath } from '@/api/upload'
export default {
  data() {
    return {
      videoPath: ''
    }
  },
  onLoad(options) {
    this.videoPath = decodeURIComponent(options.videoPath || '');
  },
  methods: {
    uploadFilePromise({ url, type, name }) {
      return new Promise((resolve, reject) => {
        const files = {
          fileName: url
        }
        fileUploadPath(files).then((res) => {
          if (res.code === 200) {
            //此示例上传参数只列举必填字段，如有其他需求可参考：
            //PostObject文档：https://help.aliyun.com/zh/oss/developer-reference/postobject
            //签名版本4文档：https://help.aliyun.com/zh/oss/developer-reference/signature-version-4-recommend
            const formData = res.data
            console.log('文件本地路径', res)
            uni.uploadFile({
              url: 'https://article-prod.oss-cn-chengdu.aliyuncs.com',
              filePath: url,
              name: 'file', //固定值为file
              formData: formData,
              success(res) {
                if (res.statusCode === 204) {
                  resolve({ url: 'https://article-prod.oss-cn-chengdu.aliyuncs.com/' + formData.key })
                  console.log('上传成功', res)
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 3000
                  })
                }
              },
              fail(err) {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 3000
                })
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 3000
            })
          }
        })
      })
    },
    leftClick() {
      uni.navigateBack()
    },
    async handleComplete() {
      uni.showLoading({
        title: '上传中',
        mask: true
      })
      const { url } = await this.uploadFilePromise({ url: this.videoPath })
      uni.hideLoading()
      if (url) {
        // 跳转至C页面并传递视频路径
        uni.navigateTo({
          url: `/pagesSub/du/articleV?url=${encodeURIComponent(url)}`
        })
      } else {
        uni.showToast({
          title: '上传失败，请重试',
          icon: 'none',
          duration: 3000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.full-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.video-preview {
  width: 100%;
  height: 100vh;
}

.complete-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 20rpx 120rpx;
  background-color: #fc7110;
  color: white;
  border-radius: 50rpx;
  font-size: 34rpx;
  z-index: 999;
}
</style>
